<template>

  <div class="mpart">
    <div class="hkl"></div>
    <div class="vision" >
      <div class="s_mide"></div>
      <div class="s_botm" ></div>
      <div class="s_botm"></div>
    </div>
    <div class="tbox">
      <small style="opacity: 0.8;"></small>
      <span class="selected"></span>
     <swiper class="img swiper-container" :options="swiperOption"  >
         <swiper-slide v-for="item of XZList" >
           <router-link  class="tab-item" :to="item.DizhiUrl" >
            <i>
              <em></em>
              <img :src="item.imgUrl"></i>
              </router-link>
          </swiper-slide>
     </swiper>
    </div>
  </div>
</template>

<script>

  export default  {
    name:'Mpart',
    data()  {
      return  {
        swiperOption: {
        loop: true,
        centeredSlides: true,
        slidesPerView: '5',
        hashNavigation: true,
        slideToClickedSlide:true,
         history: true,
        },
            "XZList": [{
            "id": "0001",
            "imgUrl": "https://m.xzw.com/static/public/images/prot_icon/xz/a/1.png",
            DizhiUrl:'/xingzuo/baiyang'
          },{
            "id": "0002",
            "imgUrl": "https://m.xzw.com/static/public/images/prot_icon/xz/a/2.png",
            DizhiUrl:'/xingzuo/shuangyu'
          },{
            "id": "0003",
            "imgUrl": "https://m.xzw.com/static/public/images/prot_icon/xz/a/3.png",
            DizhiUrl:'/xingzuo/pages'
          },{
            "id": "0004",
            "imgUrl": "https://m.xzw.com/static/public/images/prot_icon/xz/a/4.png",
            DizhiUrl:'/xingzuo/pages'
          },{
            "id": "0005",
            "imgUrl": "https://m.xzw.com/static/public/images/prot_icon/xz/a/5.png",
            DizhiUrl:'/xingzuo/pages'
          },{
            "id": "0006",
            "imgUrl": "https://m.xzw.com/static/public/images/prot_icon/xz/a/6.png",
            DizhiUrl:'/xingzuo/pages'
          },{
            "id": "0007",
            "imgUrl": "https://m.xzw.com/static/public/images/prot_icon/xz/a/7.png",
            DizhiUrl:'/xingzuo/pages'
          },{
            "id": "0008",
            "imgUrl": "https://m.xzw.com/static/public/images/prot_icon/xz/a/8.png",
            DizhiUrl:'/xingzuo/pages'
          },{
            "id": "0009",
            "imgUrl": "https://m.xzw.com/static/public/images/prot_icon/xz/a/9.png",
            DizhiUrl:'/xingzuo/pages'
          },{
            "id": "0010",
            "imgUrl": "https://m.xzw.com/static/public/images/prot_icon/xz/a/10.png",
            DizhiUrl:'/xingzuo/pages'
          },{
            "id": "0011",
            "imgUrl": "https://m.xzw.com/static/public/images/prot_icon/xz/a/11.png",
            DizhiUrl:'/xingzuo/pages'
          },{
            "id": "0012",
            "imgUrl": "https://m.xzw.com/static/public/images/prot_icon/xz/a/12.png",
            DizhiUrl:'/xingzuo/pages'
          }]
      }
    }
}

</script>

<style>
  .mpart{ background: -webkit-gradient(linear, 66% 100%, 58% 0%, from(#645af9), to(#709Bff)); background-size:cover; margin-bottom:0.1rem;    }
  .mpart .vision .s_botm:nth-child(1n), .vision .s_botm:nth-child(2n) {margin-top: .58rem;}
  .tbox{ padding-top: .35rem;}
  .img{height: 2rem;}
  .tbox .img .swiper-slide{-webkit-transform: scale(0.72);transform: scale(0.72);-webkit-transition: all .3s;transition: all .3s;color: #fff;width:2.2rem;text-align: center;font-size:0.315rem;margin-top: .35rem; opacity: .7;}
  .tbox .img .swiper-slide i { display:inline-block; color:#ed7773; width: 1rem; height: 1rem; position: relative;}
  .tbox .img .swiper-slide i img {width:1rem; height:1rem; display:block; margin: 0 auto;}
  .tbox .img .swiper-slide em{-webkit-transition: all .3s;transition: all .3s;position:absolute;top:0;left:0;width:1rem; height: 1rem; background-color:rgba(255,255,255,.3) ; border-radius: 50%; display: block; z-index: -2;}
  .tbox .selected{display:block;position: absolute;bottom:0;left:50%; background: url(https://m.xzw.com/static/public/images/arrow_B.png) no-repeat center 0; background-size:cover;    width: .25rem;
      height: .25rem;margin: .1rem auto 0 -.3rem;}
  .tbox .img .swiper-slide.swiper-slide-active{margin:0 .1rem;-webkit-transform: scale(1);transform: scale(1); opacity: 1;}
  .tbox .img .swiper-slide.swiper-slide-active i {margin-top: .25rem;}
  .tbox .img .swiper-slide.swiper-slide-active em {opacity: 0;}
  ._blur { -webkit-filter: blur(5px); -moz-filter: blur(5px); -ms-filter: blur(5px); -o-filter: blur(5px);  filter: blur(5px);   }
  .mpart { background: -webkit-gradient(linear, 78% 100%, 68% 0%, from(#645af9), to(#708aff)); background-size:100% 4.2rem; overflow: hidden; position: relative; margin-bottom: .25rem}
  .hkl{background: url(https://m.xzw.com/static/public/images/hkl.png) no-repeat 0 0;background-size:100% auto;height: 4rem;position: absolute;top: 0;left: 0;width: 100%;}
  .tbox { position: relative; top: 0; width:100%;}
  .vision { position: absolute; width:100%; }
  .vision .s_mide {background:url(https://m.xzw.com/static/public/images/bgstar.svg) no-repeat 0 0;background-size:100%;height:4rem;position: relative;margin-top:-0.4rem;}
  .vision .s_botm { background:url(https://m.xzw.com/static/public/images/cloud1.png) repeat-x 0 bottom; height: 1.8rem;position: absolute;top: 0;left:0;}
  .vision .s_botm:nth-child(1n) { width: 40rem; background-size: 3.8rem auto; animation: wave 30s linear 0s infinite; -webkit-animation:wave 30s linear 0s infinite;}
  .vision .s_botm:nth-child(2n) {width: 40rem;animation: wave2 60s linear 0s infinite;-webkit-animation:wave2 60s linear 0s infinite; background-image:url(https://m.xzw.com/static/public/images/cloud2.png); }

  @-webkit-keyframes wave {
     form{
  		left: 0;
  	}
  	to{
  		left: -50%;
  	}
  }

  @keyframes wave {
  	form{
  		left: 0;
  	}
  	to{
  		left: -30rem;
  	}
  }
  @-webkit-keyframes wave2
  {
  	form{left: 0;}
  	to{left: -36rem;}
  }

  @keyframes wave2
  {
  	form{left: 0;}
  	to{left: -36rem;}
  }
</style>
